import React from "react";
import styles from "./styles.module.less";

interface Emoji {
  id: number;
  emoji: string;
  label: string;
}

interface EmojiPickerProps {
  width: number;
  height: number;
  onEmojiClick: (emoji: Emoji) => void;
}

const EmojiPicker: React.FC<EmojiPickerProps> = ({
  width,
  height,
  onEmojiClick,
}) => {
  const emojis: Emoji[] = [
    { id: 1, emoji: "😀", label: "嘿嘿" },
    { id: 2, emoji: "😃", label: "哈哈" },
    { id: 3, emoji: "😄", label: "大笑" },
    { id: 4, emoji: "😁", label: "嘻嘻" },
    { id: 5, emoji: "😆", label: "斜眼笑" },
    { id: 6, emoji: "😅", label: "苦笑" },
    { id: 7, emoji: "🤣", label: "笑的满地打滚" },
    { id: 8, emoji: "😂", label: "笑哭了" },
    { id: 9, emoji: "🙂", label: "呵呵" },
    { id: 10, emoji: "🙃", label: "倒脸" },
    { id: 11, emoji: "😉", label: "眨眼" },
    { id: 12, emoji: "😊", label: "羞涩微笑" },
    { id: 13, emoji: "😇", label: "微笑天使" },
    { id: 14, emoji: "🥰", label: "喜笑颜开" },
    { id: 15, emoji: "😍", label: "色色" },
    { id: 16, emoji: "🤩", label: "眼花缭乱" },
    { id: 17, emoji: "😘", label: "飞吻" },
    { id: 18, emoji: "😗", label: "亲嘴" },
    { id: 19, emoji: "😚", label: "嘴巴" },
    { id: 20, emoji: "😙", label: "倾诉" },
    { id: 21, emoji: "😋", label: "甜甜的" },
    { id: 22, emoji: "😛", label: "吃" },
    { id: 23, emoji: "😜", label: "笑脸" },
    { id: 24, emoji: "🤪", label: "卡通" },
    { id: 25, emoji: "😎", label: "酷" },
    { id: 26, emoji: "🤓", label: "书呆子" },
    { id: 27, emoji: "🧐", label: "瞧瞧" },
    { id: 28, emoji: "😕", label: "困惑" },
    { id: 29, emoji: "😟", label: "担心" },
    { id: 30, emoji: "🙁", label: "不开心" },
    { id: 31, emoji: "☹️", label: "不高兴" },
    { id: 32, emoji: "😮", label: "吃惊" },
    { id: 33, emoji: "😯", label: "震惊" },
    { id: 34, emoji: "😲", label: "惊讶" },
    { id: 35, emoji: "😳", label: "尴尬" },
    { id: 36, emoji: "🥺", label: "眼泪汪汪" },
    { id: 37, emoji: "😦", label: "沮丧" },
    { id: 38, emoji: "😧", label: "焦虑" },
    { id: 39, emoji: "😨", label: "害怕" },
    { id: 40, emoji: "😰", label: "冷汗" },
    { id: 41, emoji: "😥", label: "哭泣" },
    { id: 42, emoji: "😢", label: "伤心" },
    { id: 43, emoji: "😭", label: "大哭" },
    { id: 44, emoji: "😩", label: "苦恼" },
    { id: 45, emoji: "🐵", label: "猴子" },
    { id: 46, emoji: "🐶", label: "狗狗" },
    { id: 47, emoji: "🐱", label: "猫咪" },
    { id: 48, emoji: "🐭", label: "老鼠" },
    { id: 49, emoji: "🐹", label: "仓鼠" },
    { id: 50, emoji: "🐰", label: "兔子" },
    { id: 51, emoji: "🦊", label: "狐狸" },
    { id: 52, emoji: "🐻", label: "熊" },
    { id: 53, emoji: "🐼", label: "熊猫" },
    { id: 54, emoji: "🐨", label: "树袋熊" },
    { id: 55, emoji: "🐯", label: "老虎" },
    { id: 56, emoji: "🦁", label: "狮子" },
    { id: 57, emoji: "🐮", label: "牛" },
    { id: 58, emoji: "🐷", label: "猪" },
    { id: 59, emoji: "🐸", label: "青蛙" },
    { id: 60, emoji: "🐵", label: "猴子" },
    { id: 61, emoji: "🐦", label: "小鸟" },
    { id: 62, emoji: "🐤", label: "雏鸟" },
    { id: 63, emoji: "🦆", label: "鸭子" },
    { id: 64, emoji: "🐧", label: "企鹅" },
    { id: 65, emoji: "🐙", label: "章鱼" },
    { id: 66, emoji: "🦑", label: "鱿鱼" },
    { id: 67, emoji: "🦀", label: "螃蟹" },
    { id: 68, emoji: "🦞", label: "龙虾" },
    { id: 69, emoji: "🦐", label: "小虾" },
    { id: 70, emoji: "🦪", label: "蛤蜊" },
    { id: 71, emoji: "🦞", label: "龙虾" },
    { id: 72, emoji: "🐌", label: "蜗牛" },
    { id: 73, emoji: "🦋", label: "蝴蝶" },
    { id: 74, emoji: "🐞", label: "瓢虫" },
  ];

  const handleClick = (emoji: Emoji) => {
    if (onEmojiClick) {
      onEmojiClick(emoji);
    }
  };

  return (
    <div
      className={styles.parent}
      style={{
        width: `${width}px`,
        height: `${height + 10}px`,
        left: `-${width / 2 - 30}px`,
      }}
    >
      <div
        className={styles.emojiPicker}
        style={{
          width: `${width}px`,
          height: `${height}px`,
        }}
      >
        {emojis.map((emoji) => (
          <span
            key={emoji.id}
            style={{ fontSize: "24px", cursor: "pointer", marginRight: "10px" }}
            title={emoji.label}
            onClick={() => handleClick(emoji)}
          >
            {emoji.emoji}
          </span>
        ))}
      </div>
    </div>
  );
};

export default EmojiPicker;
